<template>
  <div class="flex mt-4 gap-2" :class="{ 'msg-recv': msg.fromId === ownerId }">
    <el-avatar :size="48" shape="square" :src="avatar" />
    <ChatBubble :msg="msg" />
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import ChatBubble from './ChatBubble.vue'
import { FileBody, Msg, MsgType, TextBody } from './types'
import { ownerId } from './utils'
defineProps<{
  msg: Msg<any>
  avatar: string
}>()

onMounted(() => {})
</script>

<style scoped lang="scss">
.msg-recv {
  // 右对齐，元素从右向左排列
  flex-direction: row-reverse;
}
.msg-img {
  max-width: 200px;
  max-height: 200px;
  border-radius: 5px;
  margin-top: 5px;
}
</style>
